<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<h2 id="score">0</h2>
		<div class="web"></div>
		
		<script type="text/javascript">
			var web = document.querySelector(".web");
			var b = document.getElementsByClassName("b");
			var w = document.getElementsByClassName("w");
			
			for(var i=0;i<4;i++){
				var div = document.createElement("div");
				web.insertBefore(div,div[0]);
				for(var j=0;j<4;j++){
					var Adiv = document.createElement("div");
					div.appendChild(Adiv);
					var num = Math.floor(Math.random()*4);
					Adiv.classList.add("w");
				}
				div.childNodes[num].classList.remove("w");
				div.childNodes[num].classList.add("b");
			}
			
			var p = document.createElement("p");
			p.innerText = "开始游戏";
			b[3].appendChild(p);
			for(var i=0;i<4;i++){
				b[i].addEventListener("click",function(){
					this.style="background:gray";
				})
			}
			for(var j=0;j<12;j++){
				w[j].addEventListener("click",function(){
					this.style="background:red";
				})
			}
			div.addEventListener("click",function(){
				var time = setInterval(function(){
					for(var i=0;i<4;i++){
						b[i].addEventListener("click",function(){
							this.style="background:gray";
						})
					}
					for(var j=0;j<12;j++){
						w[j].addEventListener("click",function(){
							this.style="background:red";
							clearInterval(time);
							alert("结束");
						})
					}
					var div = document.createElement("div");
					web.insertBefore(div,web.firstChild);
					for(var j=0;j<4;j++){
						var Adiv = document.createElement("div");
						div.appendChild(Adiv);
						var num = Math.floor(Math.random()*4);
						Adiv.classList.add("w");
					}
					div.classList.add("jianbian");
					div.childNodes[num].classList.remove("w");
					div.childNodes[num].classList.add("b");
					div.parentNode.lastChild.remove();
				},1000)
			})
		</script>
	</body>
</html>
